/*******
 * list列表的视图渲染
 * @params(tableProps) 表格的基本属性（数据，分页，表格的样式），必选参数
 * @params(columnProps)  每列的属性，如最后一列为操作列，key值必须为operation，具体操作在DroProps中定义，必选参数
 * @params(DropProps) 用户自定义对于每一行数据的具体操作，可选参数
 * @return list列表的视图
 *******/

import React from 'react';
import PropTypes from 'prop-types';
import { Table } from 'antd';
import DropMenu from './../Dropdown/Dropdown';

const List = ({ tableProps, columnProps, DropProps }) => {
    let scrollX = 0;
    columnProps.forEach((item) => {
        if (item.width){
            scrollX += item.width;
        } else {
            scrollX += 150;
        }
        if (item.key === 'operation' || item.key === 'Operation'){
            item.render = (record) => (
                <DropMenu ID={record.id} {...DropProps}/>
            )
        }
    });

    const tableOptions = {
        ...tableProps,
        columns: columnProps,
        scroll: {
            x: scrollX
        }
    };

    return (
        <div>
            <Table {...tableOptions} />
        </div>
    )
};

List.propTypes = {
    tableProps: PropTypes.object.isRequired,
    columnProps: PropTypes.array.isRequired,
    DropProps: PropTypes.object,
};

export default List;
